<template>
	<div class="orderevaluate">
		<div class="orderevaluate-title"><span>订单评价</span></div>
		<div class="orderevaluate-text">
			<div class="orderevaluate-text-every">
				<div class="orderevaluate-text-left">
					<div></div>
					<div>好吃的不得了快来吃</div>
				</div>
				<div class="orderevaluate-text-right">
					<div class="orderevaluate-text-right-div1">
						<span class="orderevaluate-text-right-left">商品评分</span>
						<span class="block1">
							<el-rate v-model="value1"></el-rate>
						</span>
					</div>
					<div><span class="orderevaluate-text-right-left">商品评价</span><textarea name="" id="" placeholder="商品评价最少十个字"></textarea></div>
					<div>
						<span class="orderevaluate-text-right-left">晒图片</span>
						<span>
							<label>+<input type="file" class="subinput"></label>
							<label>+<input type="file" class="subinput"></label>
							<label>+<input type="file" class="subinput"></label>
							<label>+<input type="file" class="subinput"></label>
						</span>
					</div>
				</div>
			</div>
			<div class="orderevaluate-text-every">
				<div class="orderevaluate-text-left">
					<div></div>
					<div>好吃的不得了快来吃</div>
				</div>
				<div class="orderevaluate-text-right">
					<div class="orderevaluate-text-right-div1">
						<span class="orderevaluate-text-right-left">商品评分</span>
						<span class="block2">
							<el-rate v-model="value1"></el-rate>
						</span>
					</div>
					<div><span class="orderevaluate-text-right-left">商品评价</span><textarea name="" id="" placeholder="商品评价最少十个字"></textarea></div>
					<div>
						<span class="orderevaluate-text-right-left">晒图片</span>
						<span>
							<label>+<input type="file" class="subinput"></label>
							<label>+<input type="file" class="subinput"></label>
							<label>+<input type="file" class="subinput"></label>
							<label>+<input type="file" class="subinput"></label>
						</span>
					</div>
				</div>
			</div>
		</div>
		<div class="orderevaluate-bottom">
			<div class="orderevaluate-bottom-div1">
				<div><span>服务态度</span><i class="iconfont icon-pingfen"></i><i class="iconfont icon-pingfen"></i><i class="iconfont icon-pingfen"></i><i class="iconfont icon-pingfen"></i><i class="iconfont icon-pingfen"></i></div>
				<div><span>描述相符</span><i class="iconfont icon-pingfen"></i><i class="iconfont icon-pingfen"></i><i class="iconfont icon-pingfen"></i><i class="iconfont icon-pingfen"></i><i class="iconfont icon-pingfen"></i></div>
			</div>
			<div class="orderevaluate-bottom-div2">提交评价</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				value1: null,
				value2: null,
				colors: ['#99A9BF', '#F7BA2A', '#FF9900']
			}
		}
	}
</script>

<style>
	.orderevaluate {
		width: 100%;
		border: 1px solid #c1c1c1;
	}

	.orderevaluate-title {
		width: 100%;
		height: 58px;
		line-height: 58px;
		border-bottom: 1px solid #c1c1c1;
	}

	.orderevaluate-title span {
		margin-left: 3%;
	}

	.orderevaluate-text-every {
		width: 94%;
		height: 363px;
		margin-left: 3%;
		margin-bottom: 30px;
		border-bottom: 1px dashed #c1c1c1;
	}

	.orderevaluate-text-left {
		float: left;
		width: 35%;
		height: 100%;
	}

	.orderevaluate-text-left div:nth-of-type(1) {
		width: 200px;
		height: 200px;
		border: 1px solid #c1c1c1;
		margin-top: 25px;
		background:url("../assets/img/banner-13.png") no-repeat;
		background-size: 100% 100%;
	}

	.orderevaluate-text-left div:nth-of-type(2) {
		margin-top: 20px;
		color: #C1C1C1;
	}

	.orderevaluate-text-right {
		float: left;
		width: 65%;
		height: 100%;
		font-size: 20px;
		color: #c1c1c1;
	}

	.orderevaluate-text-right i {
		margin-right: 10px;
	}

	.orderevaluate-text-right-div1 {
		width: 100%;
		height: 26px;
		margin-top: 38px;
	}

	.orderevaluate-text-right div {
		margin-bottom: 30px;
	}

	.orderevaluate-text-right-left {
		margin-right: 24px;
		float: left;
		text-align: right;
		vertical-align: top;
		width: 90px;
	}

	.orderevaluate-text-right textarea {
		resize: none;
		width: 70%;
		height: 138px;
		outline: none;
	}

	.orderevaluate-text-right label {
		float: left;
		width: 60px;
		height: 60px;
		font-size: 40px;
		line-height: 60px;
		text-align: center;
		color: #c5c5c5;
		background: #f2f2f2;
		outline: none;
		margin-right: 10px;
	}

	.orderevaluate-text-right input {
		display: none;
	}

	.orderevaluate-bottom {
		width: 100%;
		height: 220px;
		border-top: 1px solid #c1c1c1;
	}

	.orderevaluate-bottom-div1 {
		width: 100%;
		height: 132px;
		line-height: 132px;
	}

	.orderevaluate-bottom-div1 div {
		float: left;
	}

	.orderevaluate-bottom-div1 div:nth-of-type(1) {
		margin-left: 20%;
		margin-right: 15%;
	}

	.orderevaluate-bottom-div1 i {
		margin-left: 10px;
	}

	.orderevaluate-bottom-div2 {
		width: 156px;
		height: 50px;
		line-height: 50px;
		background: #f08200;
		color: white;
		text-align: center;
		margin: auto;
		border-radius: 10px;
		cursor: pointer;
	}
</style>
